// 封装一个函数 用来渲染message组件

import { createVNode, render } from 'vue'

// Message({ type: 'error', text: '登录失败' })

// 1. 把函数的架子搭起来
// 2. 组件渲染的核心逻辑
import Messages from './index.vue'
function Message ({ type, text }) {
  // 1.使用createVNode方法 把message组件生成虚拟dom 并且传入prop参数
  const VNode = createVNode(
    Messages,
    {
      type,
      text
    }
  )
  // 2.render渲染成真实的dom 差一个挂载的节点container 生成一个container
  const container = document.createElement('div')
  // 把创建生成的container节点 添加的body的末尾
  document.body.appendChild(container)
  // 3. 准备好container和虚拟dom 调用render生成真实dom 完成渲染
  render(VNode, container)
  // 4. 延时删除
  setTimeout(() => {
    render(null, container)
  }, 1500)
}

export default Message
